<template>
  <div class="factory-container">
    <!-- 添加数据按钮 -->
    <div class="add"><el-button type="primary">新建</el-button></div>
    <!-- 生产线数据列表 -->
    <el-table
      :data="Factorys"
      style="width: 100%"
      border
      @expand-change="handleExpand"
    >
      <el-table-column type="expand">
        <template #default="{row}">
          <nestTable :id="row.id" ref="nest" />
        </template>
      </el-table-column>
      <el-table-column
        label="编号"
        prop="id"
        width="100px"
      />
      <el-table-column
        label="产品"
        prop="production"
      />
      <el-table-column
        label="生产线名称"
        prop="name"
      />
      <el-table-column
        label="产品型号"
        prop="model"
      />
      <el-table-column
        label="产品规格"
        prop="specification"
      />
      <el-table-column
        label="描述"
        prop="describe"
        show-overflow-tooltip
      />
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
          <el-button type="text" size="small">删除</el-button>
          <el-button type="text" size="small">新增</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="params.pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 对话框表单 -->
    <el-dialog title="修改生产线信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getFactorys } from '@/api/factory'
import nestTable from './components/nestTable.vue'
export default {
  components: {
    nestTable
  },
  data() {
    return {
      Factorys: [],
      dialogFormVisible: false,
      loading: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      params: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData(params) {
      const res = await getFactorys({
        params,
        pageNo: this.params.pageNo - 1
      })
      this.Factorys = res.content
      this.total = res.totalElements
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getData(this.params)
    },
    handleCurrentChange(val) {
      this.params.pageNo = val
      this.getData(this.params)
    },
    handleExpand(row) {
      this.$nextTick(() => {
        this.$refs.nest.getData(row.id)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.add {
  float: right;
}
</style>
